<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>导购风云榜</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
</head>

<body>

<div id="wrapper">
	
	<!--优惠券详情-->
	<div class="weal-dtlMod">
		<h5 class="title dm-clearfix bottom-line">
			<span class="txt">系统统计-导购风云榜</span>
		</h5>
		<div class="guide-info dm-clearfix">
			<dl class="data-1">
				<dt class="bt">区域</dt>
				<dd class="num">16</dd>
			</dl>
			<dl class="data-2">
				<dt class="bt">门店</dt>
				<dd class="num">196</dd>
			</dl>
			<dl class="data-3">
				<dt class="bt">加盟商</dt>
				<dd class="num">280</dd>
			</dl>
			<dl class="data-4">
				<dt class="bt">会员总数</dt>
				<dd class="num">2800000</dd>
			</dl>
			<dl class="data-5 last">
				<dt class="bt">导购总数</dt>
				<dd class="num">1200</dd>
			</dl>
		</div>
	</div>
	
	<!--使用记录-->
	<div class="main-nav bg-w">
		<ul class="nav-box dm-clearfix">
			<li class="on" @click="tab(0)">区域</li>
			<li @click="tab(1)">门店</li>
			<li @click="tab(2)">加盟商</li>
		</ul>
		<div class="main-table">
			<table class="dm-table" cellpadding="0" cellspacing="0" width="100%" border="1" bordercolor="#ddd">
				<tr>
					<th width="50">名次</th>
					<th>{{ type == 0 ? '区域' : type == 1 ? '门店' : '加盟商' }}</th>
					<th>会员数量</th>
					<th>导购数量</th>
					<th>会员占比</th>
					<th>导购占比</th>
				</tr>
				<tr class="tc" v-for="(item,index) in guideData">
					<td>{{index+1}}</td>
					<td>{{ type == 0 ? item.area : type == 1 ? item.store : item.sellor }}</td>
					<td>{{item.vip}}</td>
					<td>{{item.guide}}</td>
					<td>{{ ((item.vip/(parseInt(item.vip)+parseInt(item.guide)))*100).toFixed(2)+'%' }}</td>
					<td>{{ ((item.guide/(parseInt(item.vip)+parseInt(item.guide)))*100).toFixed(2)+'%' }}</td>
				</tr>
			</table>
			
			<div class="pageMod">
				<input type="button" class="first-btn" value="首页" />
				<input type="button" class="prev-btn" value="上一页" />
				<div class="page-box">
					<a class="on">1</a>
					<a>2</a>
					<a>3</a>
					<a>4</a>
					<span>…</span>
					<a>100</a>
				</div>
				<input type="button" class="next-btn" value="下一页" />
				<input type="button" class="last-btn" value="末页" />
			</div>
		</div>
	</div>
	
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var vm = new Vue({
	el:'#wrapper',
	data:{
		guideData:data.areaGuide,
		type:0,
	},
	methods:{
		tab:function(index){
			var that = this;
			$(".nav-box li").eq(index).addClass('on').siblings().removeClass('on');
			that.type = index;
		},
	}
});

</script>

</body>
</html>
